<template>
    <div class="yield-rate-container">
      <!-- 搜索区域 -->
      <div class="search-panel">
        <div class="search-row">
          <div class="search-item time-selection">
            <span class="label">时间</span>
            <el-radio-group v-model="searchParams.timeType" size="small">
              <el-radio-button label="start">开始时间</el-radio-button>
              <el-radio-button label="end">结束时间</el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="searchParams.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="custom-date-picker"
              size="small"
              style="margin-left: 10px; width: 240px;"
            />
          </div>
          <div class="search-item">
            <span class="label">连退入口卷号</span>
            <el-input v-model="searchParams.annealingEntryRollNo" placeholder="请输入" class="custom-input" size="small" />
          </div>
          <div class="search-item">
            <span class="label">连退出口卷号</span>
            <el-input v-model="searchParams.annealingExitRollNo" placeholder="请输入" class="custom-input" size="small" />
          </div>
           <div class="search-actions">
            <button class="btn query-btn" @click="handleSearch">查询</button>
            <button class="btn reset-btn" @click="handleReset">重置</button>
            <button class="btn export-btn">导出</button>
          </div>
        </div>
      </div>
  
      <!-- 表格区域 -->
      <div class="table-panel">
        <el-table
          :data="pagedTableData"
          style="width: 100%;"
          height="100%"
          border
          highlight-current-row
          size="small"
          :cell-class-name="tableCellClassName"
          :header-cell-style="{ background: '#2a5caa', color: '#fff', padding: '4px 8px', textAlign: 'center', fontWeight: 'normal', border: 'none' }"
          :cell-style="{ padding: '4px 8px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
          :row-style="{ background: '#0f2142' }"
        >
          <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" fixed="left" />
          <el-table-column prop="annealingEntryRollNo" label="连退入口卷号" width="140" />
          <el-table-column prop="annealingExitRollNo" label="连退出口卷号" width="140" />
          <el-table-column prop="steelGrade" label="钢牌号" width="80" />
          <el-table-column prop="incomingWeight" label="来料重量[t]" width="100" />
          <el-table-column prop="finishedWeight" label="成品重量[t]" width="100" />
          <el-table-column prop="thickness" label="厚度[mm]" width="80" />
          <el-table-column prop="width" label="宽度[mm]" width="80" />
          <el-table-column prop="finishedLength" label="成品长度[mm]" width="110" />
          <el-table-column prop="entryHeadCutWeight" label="入口切头重量[kg]" width="120" />
          <el-table-column prop="entryTailCutWeight" label="入口切尾重量[kg]" width="120" />
          <el-table-column prop="exitHeadCutWeight" label="出口切头重量[kg]" width="120" />
          <el-table-column prop="exitTailCutWeight" label="出口切尾重量[kg]" width="120" />
          <el-table-column prop="halfRollSampleWeight" label="半卷取样重量" width="100" />
          <el-table-column prop="annealingYieldRate" label="连退成材率[%]" width="110" />
          <el-table-column prop="newScrapRate" label="新添废料率[%]" width="110" />
          <el-table-column prop="levelingCutLossJudgement" label="平整切损判定" width="110" />
          <el-table-column prop="annealingCompletionTime" label="连退生产完成时刻" width="160" />
          <el-table-column prop="hallEntryRollNo" label="霍尔入口卷号" width="140" />
          <el-table-column label="霍尔出口卷号1/重量" width="150" align="center">
             <template #default="{ row }"> {{ row.hallExitRollNo1 }} / {{ row.hallExitWeight1 }} </template>
          </el-table-column>
          <el-table-column label="霍尔出口卷号2/重量" width="150" align="center">
             <template #default="{ row }"> {{ row.hallExitRollNo2 }} / {{ row.hallExitWeight2 }} </template>
          </el-table-column>
          <el-table-column label="霍尔出口卷号3/重量" width="150" align="center">
             <template #default="{ row }"> {{ row.hallExitRollNo3 }} / {{ row.hallExitWeight3 }} </template>
          </el-table-column>
          <el-table-column label="霍尔出口卷号4/重量" width="150" align="center">
             <template #default="{ row }"> {{ row.hallExitRollNo4 }} / {{ row.hallExitWeight4 }} </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 分页区域 -->
      <div class="pagination-panel">
         <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            small
          />
      </div>
  
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, computed } from 'vue';
  import type { TableColumnCtx } from 'element-plus';
  
  // --- Interfaces ---
  interface SearchParams {
    timeType: string; // 'start' or 'end'
    dateRange: Date[];
    annealingEntryRollNo: string;
    annealingExitRollNo: string;
  }
  
  interface TableRow {
    id: number;
    annealingEntryRollNo: string;
    annealingExitRollNo: string;
    steelGrade: string;
    incomingWeight: number;
    finishedWeight: number;
    thickness: number;
    width: number;
    finishedLength: number;
    entryHeadCutWeight: number;
    entryTailCutWeight: number;
    exitHeadCutWeight: number;
    exitTailCutWeight: number;
    halfRollSampleWeight: number;
    annealingYieldRate: string; // Percentage as string
    newScrapRate: string; // Percentage as string
    levelingCutLossJudgement: number;
    annealingCompletionTime: string;
    hallEntryRollNo: string;
    hallExitRollNo1?: string;
    hallExitWeight1?: number;
    hallExitRollNo2?: string;
    hallExitWeight2?: number;
    hallExitRollNo3?: string;
    hallExitWeight3?: number;
    hallExitRollNo4?: string;
    hallExitWeight4?: number;
  }
  
  // --- Reactive State ---
  const searchParams = reactive<SearchParams>({
    timeType: 'start',
    dateRange: [],
    annealingEntryRollNo: '',
    annealingExitRollNo: ''
  });
  
  // --- Mock Table Data (Total 33776 rows based on image) ---
  const allTableData = ref<TableRow[]>(Array.from({ length: 33776 }, (_, i) => {
      const baseId = 234000080 + i;
      const entryNo = `C${baseId}`;
      const exitNo = `A${String(baseId + Math.floor(Math.random() * 100)).padStart(9, '0')}`;
      const yieldRate = (90 + Math.random() * 10).toFixed(2);
      const cutLoss = Math.random() > 0.8 ? Math.floor(Math.random() * 20) + 1 : 0; // Some have cut loss
  
      const hallData: Partial<TableRow> = {};
      if (i % 5 === 1) {
          hallData.hallExitRollNo1 = `E${String(baseId + 1000).padStart(9, '0')}`;
          hallData.hallExitWeight1 = Math.floor(Math.random() * 5000) + 3000;
      }
       if (i % 7 === 2) {
          hallData.hallExitRollNo1 = `E${String(baseId + 1100).padStart(9, '0')}`;
          hallData.hallExitWeight1 = Math.floor(Math.random() * 5000) + 3000;
          hallData.hallExitRollNo2 = `E${String(baseId + 1200).padStart(9, '0')}`;
          hallData.hallExitWeight2 = Math.floor(Math.random() * 4000) + 2000;
      }
        if (i % 11 === 3) {
          hallData.hallExitRollNo1 = `E${String(baseId + 1300).padStart(9, '0')}`;
          hallData.hallExitWeight1 = Math.floor(Math.random() * 5000) + 3000;
          hallData.hallExitRollNo2 = `E${String(baseId + 1400).padStart(9, '0')}`;
          hallData.hallExitWeight2 = Math.floor(Math.random() * 4000) + 2000;
          hallData.hallExitRollNo3 = `E${String(baseId + 1500).padStart(9, '0')}`;
          hallData.hallExitWeight3 = Math.floor(Math.random() * 3000) + 1000;
      }
       if (i % 13 === 4) {
          hallData.hallExitRollNo1 = `E${String(baseId + 1600).padStart(9, '0')}`;
          hallData.hallExitWeight1 = Math.floor(Math.random() * 5000) + 3000;
          hallData.hallExitRollNo2 = `E${String(baseId + 1700).padStart(9, '0')}`;
          hallData.hallExitWeight2 = Math.floor(Math.random() * 4000) + 2000;
          hallData.hallExitRollNo3 = `E${String(baseId + 1800).padStart(9, '0')}`;
          hallData.hallExitWeight3 = Math.floor(Math.random() * 3000) + 1000;
           hallData.hallExitRollNo4 = `E${String(baseId + 1900).padStart(9, '0')}`;
          hallData.hallExitWeight4 = Math.floor(Math.random() * 2000) + 500;
      }
  
  
      return {
          id: i + 1,
          annealingEntryRollNo: entryNo,
          annealingExitRollNo: exitNo,
          steelGrade: i % 3 === 0 ? 'DC06' : (i % 5 === 1 ? 'DC05' : 'DC01'),
          incomingWeight: parseFloat((28 + Math.random() * 5).toFixed(3)),
          finishedWeight: parseFloat((25 + Math.random() * 4).toFixed(3)),
          thickness: i % 4 === 0 ? 0.884 : 0.88,
          width: i % 6 === 0 ? 1495 : 1485,
          finishedLength: 8500 + Math.floor(Math.random() * 2000),
          entryHeadCutWeight: 0,
          entryTailCutWeight: 0,
          exitHeadCutWeight: 0,
          exitTailCutWeight: 0,
          halfRollSampleWeight: 0,
          annealingYieldRate: `${yieldRate}%`,
          newScrapRate: `${(100 - parseFloat(yieldRate)).toFixed(2)}%`,
          levelingCutLossJudgement: cutLoss,
          annealingCompletionTime: `2023-04-02 22:${String(10 + i % 50).padStart(2, '0')}:${String(10 + i % 60).padStart(2, '0')}`,
          hallEntryRollNo: `E${String(baseId + 500).padStart(9, '0')}`,
          ...hallData
      };
  }));
  
  
  // --- Pagination ---
  const pagination = reactive({
    currentPage: 1,
    pageSize: 30, // Default to 30 based on image
    total: allTableData.value.length
  });
  
  const pagedTableData = computed(() => {
    const start = (pagination.currentPage - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    // Add filtering logic here if search is implemented
    return allTableData.value.slice(start, end);
  });
  
  const indexMethod = (index: number) => {
    return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
  };
  
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    pagination.currentPage = 1; // Reset to first page
  };
  
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
  };
  
  // --- Table Cell Styling ---
  interface CellClassNameParams {
    row: TableRow;
    column: TableColumnCtx<TableRow>;
    rowIndex: number;
    columnIndex: number;
  }
  const tableCellClassName = ({ row, column, rowIndex, columnIndex }: CellClassNameParams) => {
    console.log(row, column, rowIndex, columnIndex);
    if (column.property === 'levelingCutLossJudgement' && row.levelingCutLossJudgement > 0) {
      return 'red-text';
    }
    return '';
  };
  
  
  // --- Handlers ---
  const handleSearch = () => {
    console.log('查询参数:', searchParams);
    // Reset to page 1 and apply filtering
    pagination.currentPage = 1;
    // Implement filtering logic on allTableData here
  };
  
  const handleReset = () => {
    Object.keys(searchParams).forEach(key => {
      const typedKey = key as keyof SearchParams;
      if (typedKey === 'dateRange') searchParams[typedKey] = [];
      else if (typedKey === 'timeType') searchParams[typedKey] = 'start';
      else searchParams[typedKey] = '';
    });
    pagination.currentPage = 1;
    // Reset filtering here
    console.log('重置参数');
  };
  
  </script>
  
  <style scoped>
  /* --- Container and Base Styles (Consistent with MaterialStandards) --- */
  .yield-rate-container {
    background-color: #0a1a3a;
    color: #c0c4cc;
    padding: 15px;
    height: 100%;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    font-size: 13px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .yield-rate-container > *:not(:last-child) {
    margin-bottom: 10px; /* Reduced margin */
  }
  
  /* Search Panel (Consistent) */
  .search-panel {
    background-color: #1c2d5a;
    padding: 10px 15px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 5px;
  }
  .search-row:last-child { margin-bottom: 0; }
  .search-item {
    display: flex;
    align-items: center;
    margin-right: 15px; /* Adjusted margin */
    margin-bottom: 5px;
  }
  .label {
    color: #c0c4cc;
    margin-right: 5px;
    white-space: nowrap;
    min-width: 90px; /* Adjusted for longer labels */
    text-align: right;
    font-size: 12px;
  }
  .time-selection .label { min-width: 40px; }
  
  :deep(.el-radio-button__inner) {
      background-color: #0a1a3a;
      border-color: #3a5a8a;
      color: #c0c4cc;
      box-shadow: none !important;
      font-size: 12px;
      padding: 5px 10px;
  }
  :deep(.el-radio-button__original-radio:checked+.el-radio-button__inner) {
      background-color: #2979ff;
      border-color: #2979ff;
      color: #fff;
  }
  
  :deep(.custom-date-picker.el-date-editor) {
    height: 28px;
    background-color: #0a1a3a;
    border: 1px solid #3a5a8a;
    box-shadow: none;
  }
  :deep(.custom-date-picker .el-range-input), :deep(.custom-date-picker .el-range-separator) { color: #c0c4cc; font-size: 12px; height: 26px; line-height: 26px; }
  :deep(.custom-date-picker .el-range-separator) { padding: 0 2px; }
  :deep(.custom-date-picker .el-input__icon) { line-height: 28px; color: #c0c4cc; font-size: 12px; }
  
  .custom-input,
  :deep(.el-input__wrapper) {
    height: 28px;
    line-height: 28px;
    background-color: #0a1a3a !important;
    border: 1px solid #3a5a8a !important;
    border-radius: 3px !important;
    color: #c0c4cc !important;
    box-shadow: none !important;
    font-size: 12px !important; /* Smaller font */
    width: 160px; /* Adjusted width */
  }
  :deep(.el-input__inner) { color: #c0c4cc !important; height: 26px !important; line-height: 26px !important; }
  
  
  .search-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .btn {
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 8px;
    color: #fff;
  }
  .query-btn { background-color: #2979ff; }
  .query-btn:hover { background-color: #5393ff; }
  .reset-btn { background-color: #3a5a8a; }
  .reset-btn:hover { background-color: #5a7aa4; }
  .export-btn { background-color: #2979ff; }
  .export-btn:hover { background-color: #5393ff; }
  
  /* Table Panel */
  .table-panel {
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
    background-color: #1c2d5a;
    padding: 5px;
    border-radius: 3px;
    display: flex;
  }
  /* Deep table styles (Consistent) */
  :deep(.el-table__body tr.current-row > td.el-table__cell) { background-color: #263451 !important; color: #fff !important; }
  :deep(.el-table__cell.el-table-column--fixed-right) { background-color: #0f2142 !important; }
  :deep(.el-table__header-wrapper th.el-table-column--fixed-right) { background-color: #2a5caa !important; }
  :deep(.el-table__body tr.current-row > td.el-table-column--fixed-right) { background-color: #263451 !important; }
  
  /* Custom Cell Style */
  .red-text {
    color: #ff4d4f !important;
    font-weight: bold;
  }
  :deep(.el-table__cell.red-text) {
    color: #ff4d4f !important;
    font-weight: bold;
  }
  
  /* Pagination Panel (Consistent) */
  .pagination-panel {
    background-color: #1c2d5a;
    padding: 5px 15px;
    border-radius: 3px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
  }
  /* Deep pagination styles (Consistent for small size) */
  :deep(.el-pagination button), :deep(.el-pager li) { min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px; font-size: 12px; }
  :deep(.el-pagination__jump .el-input__wrapper) { height: 22px; line-height: 22px; width: 35px; font-size: 12px; }
  :deep(.el-pagination__jump .el-input__inner) { height: 20px !important; line-height: 20px !important; }
  :deep(.el-pagination__sizes .el-select .el-input__wrapper) { height: 22px; line-height: 22px; font-size: 12px !important; width: 80px; }
  :deep(.el-pagination__sizes .el-select .el-input__inner) { height: 20px !important; line-height: 20px !important; }
  
  /* Ensure Hall data display looks reasonable */
  :deep(.el-table .cell) {
     white-space: nowrap; /* Prevent wrapping in cells */
  }
  </style>